<template>
    <div class="app-container">
        <div class="filter-container">
            <el-input class="filter-item w-200" placeholder="操作人" size="medium" v-model="query.admin_username">
            </el-input>
            <el-input class="filter-item w-200" placeholder="操作" size="medium" v-model="query.action">
            </el-input>
            <el-button v-permission="'admin-logs.index'" class="filter-item" size="medium" icon="el-icon-search" @click="fetchList(resetPage = true)">搜索</el-button>
        </div>
        <el-table :data="logs"  border stripe v-loading="visible.listLoading">
            <el-table-column label="#" width="100px" align="center">
                <template slot-scope="scope">
                    {{query.size * (query.page-1) + scope.$index + 1}}
                </template>
            </el-table-column>
            <el-table-column prop="action" label="操作" align="center">
            </el-table-column>
            <el-table-column prop="admin_username" label="操作人" align="center">
            </el-table-column>
            <el-table-column prop="action_ip" label="ip" align="center">
            </el-table-column>
            <el-table-column prop="created_at" label="操作时间" align="center">
            </el-table-column>
        </el-table>
        <div class="pagination-container">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="query.page"
                    :page-sizes="[10, 20, 30, 50]"
                    :page-size="query.size"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </div>
    </div>
</template>

<script>
  import { fetchAdminLogs } from '@/api/system'
  export default {
    name: 'adminLog',
    data() {
      return {
        query: {
          admin_username: '',
          action: '',
          size: 10,
          page: 1
        },
        total: 1,
        visible: {
          listLoading: false
        },
        logs: []
      }
    },
    methods: {
      handleSizeChange(size) {
        this.query.size = size
        this.fetchList()
      },
      handleCurrentChange(page) {
        this.query.page = page
        this.fetchList()
      },
      fetchList(resetPage = false) {
        if (resetPage === true) {
          this.query.page = 1
        }
        this.visible.listLoading = true
        fetchAdminLogs(this.query).then(res => {
          this.visible.listLoading = false
          this.logs = res.data
          this.total = res.meta.total
        })
      }
    },
    created() {
      this.fetchList()
    }
  }
</script>

<style scoped>

</style>
